<template>
	<view class="sa-popup" >
		<view>
			<view class="sa-popup-content">
				<text class="sa-popup-content-title">{{ title }}</text>
				<slot />
				<view class="sa-popup-bottom">
					<text class="sa-popup-bottom-cancel-btn" @click="cancelPopup">取消</text>
					<text class="sa-popup-bottom-confirm-btn" @click="confirmPopup">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'saPopup',
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	methods: {
		cancelPopup() {
			this.$emit('cancelPopup');
		},
		confirmPopup() {
			this.$emit('confirmPopup');
		}
	}
};
</script>

<style scoped lang="scss">
.sa-popup {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba($color: #000000, $alpha: 0.3);
	width: 750rpx;
	height: 100vh;
	display: flex;
	justify-content: center;
	z-index: 99999;
	&-content {
		background-color: #fff;
		width: 500rpx;
		min-height: 300rpx;
		margin-top: 100rpx;
		border-radius: 8rpx;
		position: relative;
		overflow-y: auto;
		&-title {
			border-bottom: 2rpx solid #f5f6fd;
			display: block;
			width: 100%;
			text-align: center;
		    height: 80rpx;
		    line-height: 80rpx;
		    font-size: 28rpx;
		    color: $main-text-color-gray-33;
		}
		.sa-popup-bottom {
			// position: absolute;
			// bottom: 0;
			height: 80rpx;
			display: flex;
			font-size: 30rpx;
			border-top: 2rpx solid #f5f6fd;
			width: 100%;
			align-items: center;
			&-cancel-btn {
				color: #999999;
				width: 50%;
				text-align: center;
			}
			&-confirm-btn {
				color: #007aff;
				border-left: 2rpx solid #f5f6fd;
				width: 50%;
				text-align: center;
			}
		}
	}
}
</style>
